<template>
    <view class="container">
      <view>
        <view><uni-status-bar></uni-status-bar></view>
        <view class="search-box flex-cn" @click="backHome">
          <view class="navbar-left flex-cn" style="flex: 1" >
            <view
              style="width: 100rpx; text-align: center"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            ></view>
          </view>
          <view
            style="
              height: 80rpx;
              line-height: 80rpx;
              font-size: 36rpx;
              font-family: '.PingFang SC, PingFang SC';
              display: flex;
              justify-content: center;
              align-content: center;
              flex: 1;
              color: #000;
              font-weight: 600;
            "
          >
            供应商申请
          </view>
          <view style="width: 320rpx; flex: 1"></view>
        </view>
      </view>
      <view class="header">
        <text style="font-size: 40px;">供应商合作申请</text>
        <text style="margin: 5px 0;font-size: 14px;display: inline-block;">咨询热线：181-2096-2781（工作日 09:00 ~ 18:00）</text>
        <view class="link-container">
          <text style="color: white; text-decoration: none;">电脑申请,体验更佳 sems.pupumall.com</text>
          <text @click="copyLink" style="margin-left: 10px;">复制</text>
        </view>
      </view>
      <view class="login-form">
        <label for="phone">手机号快捷登录</label>
        <view class="input-group">
          <input type="text" maxlength="11" id="phone" placeholder="请输入手机号，首次登录自动注册" v-model="phone" style="width: 100%;"  @blur="validatePhone"/>
        </view>
        <view class="input-group" style="display: flex; justify-content:space-between;">
          <input type="text" maxlength="8" id="code" placeholder="请输入验证码" v-model="code" />
          <text class="code-button" :style="{backgroundColor: codeButtonDisabled ? 'gray' : '#4CAF50'}" @click="getCode" :disabled="codeButtonDisabled">{{ codeButtonText }}</text>
        </view>
        <view class="agreement">
          <checkbox @click="handleCheckboxChange" v-model="agreementChecked" class="uni-checkbox-input"></checkbox>
          <text>我已阅读并同意《<text style="color: #4CAF50;" @click="handlerToProtocol">时福森山服务协议</text>》和《<text @click="handlerTopolicy" style="color: #4CAF50;">时福森山隐私政策</text>》</text>
        </view>
        <!-- style="border: indianred; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);"  -->
        <button class="custom-button" :class="{'backgdColor': isAllConditionsMet }"  style="border: indianred; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);"      @click="login_supplier">登录</button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'Login',
    data() {
      return {
        phone: '',
        code: '',
        agreement: false,
        codeButtonText: '获取验证码',
        codeButtonDisabled: false,
        timer: null,
        agreementChecked:false,
        isAllConditionsMet: false // 状态变量
      };
    },
   
    methods: {
    // 校验正则
    validatePhone() {
      const regex = /^1[3-9]\d{9}$/;
      if (!regex.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码！',
          icon: 'none'
        });
        this.phone = '';
      }
    },

    
  async  login_supplier(){

    uni.navigateTo({
            url: `/pages/mer/tabbar/supplier/supplier_application?phone=${this.phone}`,
          });
        return
      if(!this.phone){
        uni.showToast({
          title: '请输入正确的手机号码！',
          icon: 'none'
        });
        return
      }
  
      if(!this.code){
        uni.showToast({
          title: '验证码不能为空！',
          icon: 'none'
        });
        return
      }

      if(!this.agreementChecked) {
        console.log('请勾选协议')
        uni.showToast({
          title: '请先阅读并同意《时福森山服务协议》《时福森山隐私政策》!',
          icon: 'none', 
            duration: 2000, 
            mask: true
        });
        return
      } 
             

      const { status, data ,msg} = await this.$request(
          "/SmallProgramApi/ShiFu/checkSmsCode",
          { store_id: this.$store.mallStoreId ,phone:this.phone ,sms_code:this.code}
        );
        if(status == 1){
          uni.navigateTo({
            url: `/pages/mer/tabbar/supplier/supplier_application?phone=${this.phone}`,
          });
        
        }else{

          uni.showToast({
            title:msg,
            icon: 'none'
          });
          return
        }

    },
    handlerToProtocol(){
      uni.navigateTo({
            url:'/pages/mer/tabbar/supplier/components/protocol',
        });
    },

    handlerTopolicy(){
      uni.navigateTo({
            url:'/pages/mer/tabbar/supplier/components/policy',
        });
    },
    handleCheckboxChange() {
      // 使用$nextTick()延迟更新agreementChecked的值
        this.agreementChecked = !this.agreementChecked;
        this.isAllConditionsMet = !this.isAllConditionsMet;
        console.log(this.agreementChecked  , 'this.agreementChecked')
    },

      backHome() {
        uni.navigateBack();
      },
      copyLink() {

        uni.setClipboardData({
					data: 'sems.pupumall.com', //你要复制的数据
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
      },

    async  getCode() {
        if (this.codeButtonDisabled) return;
        if(!this.phone)  return

        
        const { status, data ,msg} = await this.$request(
          "/SmallProgramApi/ShiFu/supplySendSmsCode",
          { store_id: this.$store.mallStoreId ,phone:this.phone }
        );

        if(status == 1){
          uni.showToast({
							title: msg
						});
          // 开启倒计时
          this.startCountdown();
        }else{
          uni.showToast({
            title: msg,
            icon: 'none', 
            duration: 2000, 
            mask: true
        });
        }
      },
      startCountdown() {
        let countdown = 60;
        this.codeButtonDisabled = true;
        this.codeButtonText = `${countdown}秒后重试`;
        
        this.timer = setInterval(() => {
          countdown--;
          this.codeButtonText = `${countdown}秒后重试`;
          
          if (countdown <= 0) {
            clearInterval(this.timer);
            this.codeButtonText = '获取验证码';
            this.codeButtonDisabled = false;
          }
        }, 1000);
      },
      login() {
        // 登录的逻辑
        console.log('登录');
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  };
  </script>
  
  <style scoped>
.backgdColor{
  background-color: #4CAF50 !important ; 
}
 
  
  .container {
	margin: 0 auto;
	background-color: #fff;
  }
  
  .header {
	background-color: #4CAF50;
	color: white;
	padding: 20px;
	text-align: center;
  }
  

  
  .link-container {
	/* background-color: white; */
	color: white;
	border-radius: 20px;
	display: inline-block;
	padding: 5px 10px;
	font-size: 14px;
	margin-top: 10px;
	border: 1px solid white;
  }
  
  .login-form {
	padding: 20px;
  }
  
  .login-form label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 18px;
  }
  
  .login-form .input-group {
	display: flex;
	align-items: center;
	margin: 10px 0;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
  }
  
  .login-form .input-group input[type="text"] {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
  }
  
  .login-form .code-button {
	padding: 5px 10px;
	background-color: #4CAF50;
	border: none;
	color: white;
	font-size: 14px;
	border-radius: 5px;
	cursor: pointer;
  }
  
.agreement {
	margin: 10px 0;
	font-size: 14px;
    text-align: center;
  }
  
  .login-form button {
	width: 80%;
	/* padding: 15px; */
	background-color: #ccc;
	border: none;
	color: white;
	font-size: 18px;
	border-radius: 25px;
	cursor: pointer;
	margin-top: 20px;
  }
  
  .login-form button.active {
	background-color: #4CAF50;
  }
  
  .footer {
	text-align: center;
	padding: 20px;
	font-size: 12px;
	color: #888;
  }
  
  .footer a {
	color: #4CAF50;
	text-decoration: none;
  }
.custom-button::after {
	border: indianred;
}


  </style>